<template>
  <div class="activity-detail">
    <h2>{{ activity.title }}</h2>
    <div class="activity-info">
      <p><strong>日期：</strong>{{ activity.date }}</p>
      <p><strong>地点：</strong>{{ activity.location }}</p>
    </div>
    <div class="activity-description">
      <h3>活动描述</h3>
      <p>{{ activity.description }}</p>
    </div>
  </div>
</template>

<script>
import { activities } from '../assets/activities'

export default {
  data() {
    return {
      activity: {}
    }
  },
  created() {
    const id = parseInt(this.$route.params.id)
    this.activity = activities.find(a => a.id === id) || {}
  }
}
</script>

<style scoped>
.activity-detail {
  max-width: 800px;
  margin: 2rem auto;
  padding: 1rem;
}

.activity-info {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.activity-description {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 1rem;
}

h2 {
  color: #42b983;
}

h3 {
  margin-top: 0;
  color: #333;
}

p {
  color: #666;
}
</style>